<template>
  <div class="menuSun" :class="isCollapse ? 'isCollapse' : ''">
    <template v-for="item in menuList">
      <el-submenu
        v-if="item.children && item.children.length > 0"
        :key="item.id + ''"
        :index="item.path + ''"
      >
        <div style="width: 100%" slot="title" @click="Clickss(item)">
          <span>{{ item.menuname }}</span>
        </div>
        <menuSun :menuList="item.children" @Clicks="Clickss"></menuSun>
      </el-submenu>

      <el-menu-item v-else :key="item.id + ''" :index="item.path + ''">
        <div style="width: 100%" slot="title" @click="Clickss(item)">
          <span>{{ item.menuname }}</span>
        </div>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  name: "menuSun",
  props: {
    menuList: {
      type: Array,
      required: true,
    },
    isCollapse: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    Clickss(val) {
      // console.log(val);
      if (!val.children || val.children.length == 0) {
        this.$emit("Clicks", val);
      }
    },
  },
  created() {},
};
</script>
<style>
.menuSun {
  height: 100%;
}
.isCollapse .el-submenu__title i {
  display: none;
}
</style>
